<script setup>
import {ref, computed} from 'vue'
import {addCommentService, getOrderService} from "@/apis/customer";
import {BookDetailService} from "@/apis/book";

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
import {ElMessage} from "element-plus";


const tableData = ref([])
const visibleDrawer = ref(false)
const commentModel = ref({
    oid: '',
    id: '',
    detail: ''
})

const getOrder = async () => {
    const result = await getOrderService()
    tableData.value = result.data
    console.log(tableData.value)
    for (const item of tableData.value) {
        const result = await BookDetailService(item.bid)
        item.bn = result.data.name
        item.stateName = item.state == '4' ? '已完成' : (item.state == '3' ? '已处理' : (item.state == '1' ? '未处理' : '处理中'))
    }
}

getOrder()

const addComment = async () => {

    const res = await addCommentService(commentModel.value)
    visibleDrawer.value = false
    await location.reload()
    ElMessage.success('评论添加成功')
}

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div><el-button @click="$router.push('/')" style="font-size: 12px;"><el-icon style="margin-right: 10px"><ArrowLeft /></el-icon>回到首页</el-button></div>
            <div class="header">
                <span>我的订单</span>
            </div>
        </template>
        <el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="createTime" label="时间" width="200" />
                <el-table-column prop="bn" label="书籍" width="180" />
                <el-table-column prop="count" label="数量" width="80" />
                <el-table-column prop="name" label="姓名" width="100" />
                <el-table-column prop="phone" label="电话" width="180" />
                <el-table-column prop="address" label="地址" width="200" />
                <el-table-column prop="stateName" label="状态" width="120" />
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <div v-if="tableData[scope.$index].state == '3'">
                            <el-button @click="visibleDrawer=true; commentModel.id=tableData[scope.$index].bid; commentModel.oid=tableData[scope.$index].id">添加评论</el-button>
                        </div>
                        <div v-else>
                            <el-button disabled>添加评论</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-drawer v-model="visibleDrawer" title="添加评论" direction="rtl" size="50%">
            <el-form-item>
                <div class="editor">
                    <quill-editor
                        theme="snow"
                        v-model:content="commentModel.detail"
                        contentType="text"
                    >
                    </quill-editor>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addComment">发布评论</el-button>
            </el-form-item>
        </el-drawer>
    </el-card>
</template>

<style scoped>
.header {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.editor {
    width: 100%;

    :deep(.ql-container) {
        height: 400px;
    }
}

</style>